<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />

    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    <!--    清除缓存页面-->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>汉字书写</title>
    <link rel="stylesheet" href="./index.css">

    <script src="./js/hanzi-writer.js"></script>
    <script src="./js/pinyin_dict_withtone.js"></script>
    <script src="./js/pinyinUtil.js"></script>
    <script src="./index.js"></script>
</head>

<body>

    <main>

        <div class="input-area">
            <input type="text" size="1" maxlength="1" id="hanziInput" placeholder="请输入一个汉字">
            <button id="confirm">确定</button>
        </div>

        <!-- 拼音容器 -->
        <div class="pinyin-box">
            <span id="pinyinResult"></span>
            <button class="read-btn" id="readBtn">读音</button>
        </div>
        
        <!-- 显示文字结果 -->
        <div class="target-box">
            <div class="target" id="target"></div>
        </div>
        
        <!-- 语音容器 -->
        <div id="bdtts_div_id">
            <audio id="tts_autio_id"></audio>
          </div>

    </main>

</body>

</html>